<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>故障统计</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/table.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
   	<%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
   	<script src="${newframe}/echarts/echarts-all.js" type="text/javascript"></script>
</head>
<body>
<div class="wrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">医卫士云平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">查询统计&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>故障统计</li>
        </ul>
    </div>
    <div class="form" style="height:50px;">
        <label style="float: left" for="repairType">故障类别:</label>
        <select id="repairType" name="repairType" style="width:126px;height:32px;float:left;margin-left:16px;">
            <option value="">请选择...</option>
            <option value="001">操作不当</option>
            <option value="002">开关机异常</option>
            <option value="003">充值异常</option>
            <option value="004">屏幕异常</option>
            <option value="005">开关门异常</option>
            <option value="006">温度异常</option>
            <option value="007">样本测试异常</option>
            <option value="008">质控测试异常</option>
            <option value="009">试剂异常</option>
	   </select>
        <!-- <div id="date" style="float: left">
	        <div class="form-group">
	            <label>维修日期:</label>
	            <div id="PrevTime" class="input-group date form_date" style="width: 106px"                              data-date-format="yyyy-mm-dd">
	                <input id="pTime" class="form-control" type="text" readonly                       style="text-indent:0">
	                <span class="input-group-addon">
	                    <span class="glyphicon-calendar">&gt;</span>
	                </span>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="To">到</label>
	            <div id="NextTime" class="input-group date form_date" style="width: 106px"                              data-date-format="yyyy-mm-dd">
	                <input id="nTime" class="form-control" type="text"  readonly                       style="text-indent:0">
	                <span class="input-group-addon">
	                    <span class="glyphicon-calendar">&gt;</span>
	                </span>
	            </div>
	        </div>
   		</div> -->
        <input id="query" type="button" value="搜索" class="search" onclick="search();" style="float: left">
        <span class="clear" style="float: left" onclick="cleanForm()">清除条件</span>
    </div>
    <div id="main" style="height:400px"></div>
    <!-- <div id="tablepart">
        <table id="example" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
                <th>故障类别</th>
                <th>故障次数</th>
            </tr>
            </thead>
        </table>
    </div> -->
</div>
<script type="text/javascript">
function drawChart(data){
	// 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('main')); 

	option = {
		title : {
               text: '设备故障统计',
               /* subtext: '纯属虚构', */
               x:'center'
        },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	        data:arr1
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true, 
	                type: ['pie', 'funnel'],
	                option: {
	                    funnel: {
	                        x: '25%',
	                        width: '50%',
	                        funnelAlign: 'left',
	                        max: 1548
	                    }
	                }
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	        {
	            name:'故障类别',
	            type:'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:data
	        }
	    ]
	};

	// 为echarts对象加载数据 
	myChart.setOption(option); 
}
var arr1;
function search(){
	$.ajax( {
        "dataType": 'json',
        "url": "${URL_STATISTICS_FAULTSTA}",
        "type":'post',
        "data": {repairType:$("#repairType").val()},
	    "success": function(data){
	        	var str = data.dataList;
	        	arr1 = [];
	        	for(i=0;i<str.length;i++){
	        		if(str[i].name == "001"){
	        			str[i].name = "操作不当";
     	           	}else if(str[i].name == "002"){
     	           		str[i].name = "开关机异常";
     	           	}else if(str[i].name == "003"){
     	           		str[i].name = "充值异常";
     	           	}else if(str[i].name == "004"){
     	           		str[i].name = "屏幕异常";
     	           	}else if(str[i].name == "005"){
     	           		str[i].name = "开关门异常";
     	           	}else if(str[i].name == "006"){
     	           		str[i].name = "温度异常";
     	           	}else if(str[i].name == "007"){
     	           		str[i].name = "样本测试异常";
     	           	}else if(str[i].name == "008"){
     	           		str[i].name = "质控测试异常";
     	           	}else if(str[i].name == "009"){
     	           		str[i].name = "试剂异常";
     	           	}
	        		arr1.push(str[i].name);
	        	}
	        	drawChart(data.dataList);
	        }
      } );
}
$(document).ready(function() {
	search();
});
</script>
<!-- <script>
/*var table;
function initTable() {
   table = $('#example').DataTable({
   	"bFilter": false,//去掉搜索框
       "bAutoWidth": true, //自适应宽度
       "sPaginationType" : "full_numbers",
       "ordering": false,//是否允许Datatables开启排序
       "bProcessing" : true,
       "bServerSide" : true,
       "sAjaxSource":"${URL_STATISTICS_FAULTSTA}",
       "sAjaxDataProp": "dataList",//查询后，返回的集合
       "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
           aoData.push(
                   { "name": "repairType", "value": $("#repairType").val() }
           );
           $.ajax( {
             "dataType": 'json',
             "url": sSource,
             "type":'post',
             "data": aoData,
             "success": fnCallback
           } );

        },
       
       "aoColumns" : [{
           "targets": 0,
           "data": null,
           "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
	           	if(sData.repairType == "001"){
	           		$(nTd).html("操作不当");
	           	}else if(sData.repairType == "002"){
	           		$(nTd).html("开关机异常");
	           	}else if(sData.repairType == "003"){
	           		$(nTd).html("充值异常");
	           	}else if(sData.repairType == "004"){
	           		$(nTd).html("屏幕异常");
	           	}else if(sData.repairType == "005"){
	           		$(nTd).html("开关门异常");
	           	}else if(sData.repairType == "006"){
	           		$(nTd).html("温度异常");
	           	}else if(sData.repairType == "007"){
	           		$(nTd).html("样本测试异常");
	           	}else if(sData.repairType == "008"){
	           		$(nTd).html("质控测试异常");
	           	}else if(sData.repairType == "009"){
	           		$(nTd).html("试剂异常");
	           	}else{
	           		$(nTd).html("其他");
	           	}
           }
       },{
           "mDataProp" : "staNum"
         }],
       "createdRow": function ( row, data, index ) {
           $('td', row).eq(0).addClass('border_left');
           $('td', row).eq(1).addClass('border_right');
       },
       "oLanguage": {//插件的汉化
           "sLengthMenu": "每页显示 _MENU_ 条记录",
           "sZeroRecords": "抱歉， 没有找到",
           "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
           "sInfoEmpty": "没有数据",
           "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
           "oPaginate": {
               "sFirst": "首页",
               "sPrevious": "上一页",
               "sNext": "下一页",
               "sLast": "末页"
           },
           "sZeroRecords": "没有检索到数据",
           "sProcessing": "<img src='' />",
           "sSearch": "搜索"
       }
   } );
 } 
$(document).ready(function() {
	initTable();
    initDateTime("#NextTime");
	initDateTime("#PrevTime"); 
    $('#example tr th').eq(0).addClass('border_left');
    $('#example tr th').eq(1).addClass('border_right');
    $('#example tbody tr td').addClass('active');
    $('#example tr td').eq(1).addClass('border_right');
    $('#example_paginate').parent().addClass('pagewidth');
    $('#example_info').parent().addClass('showPage');
    $('#example_length').parent().addClass('pageNow');
});
/* //刷新table数据
function refreshTable(){
	 table.ajax.reload(null);
} */
/* function initDateTime(id){
    $(id).datetimepicker({
        language:  'zh-CN',
        weekStart:  0,
        todayBtn: true,
        autoclose:  1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
} */
</script> -->
</body>
</html>